<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件冒泡</title>
</head>
<body>
    <!-- //<div class="ye" onclick="run('孩儿他爷')">孩儿他爷
        <div class="die" onclick="run('孩儿他爹')">孩儿他爹
            <div class="hai" onclick="run('孩儿自己')">孩儿自己</div>
        </div>
    </div> 
    <script> 
        /*
            事件冒泡:事件由子元素，向祖先元素一次传递。
            事件捕获:元素间存在嵌套关系，向子元素依次传递
            先决条件:元素间存在嵌套关系；元素上要由相同的事件
        */
    //    function run(val){
    //      console.log(val)
    //    }
   // </script>  -->


    <div class="ye">孩儿他爷
        <div class="die">孩儿他爹
            <div class="hai">孩儿自己</div>
        </div>
    </div> 

    <script>
        var divs = document.querySelectorAll('div');
        //监听
       
        divs[0].addEventListener('click',function(ev){
            ev.stopPropagation()
            console.log('孩儿他爷')
        })
        divs[1].addEventListener('click',function(ev){
            ev.stopPropagation()

            console.log('孩儿他爹')
        })
        divs[2].addEventListener('click',function(ev){
            ev.stopPropagation()

            console.log('孩儿自己')
        })
    </script>
</body>
</html>